<template>
	<view class="min100 container" v-if="user_id!=''">
		<view class="user_info flex flex-start ptb-30 plr-20 mt-10">
			<image :src="'http://im.ezongguan.com/static/photo/'+info.photo " mode=""></image>
			<view class="ml-20">{{info.username}}</view>
		</view>
		<view class="remarks ptb-30 plr-20 mt-20 flex1 " v-if="info.is_friend==0">
			<view class="">验证信息</view>
			<view class="ml-20">{{info.content}}{{content}}</view>
		</view>
		<view class="remarks ptb-30 plr-20 mt-20 flex" @click="show = true" v-if="info.is_friend==1">
			<view class="">备注名</view>
			<view class="flex1 flex-between">
				<view class="">{{name}}{{show_name}}</view>
				<u-icon class="ml-20" name="arrow-right"></u-icon>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" height="330" :closeable="true">
			<view class="modify center">修改备注</view>
			<u-input v-model="value" :clearable="false" shape="square" placeholder="" :focus="true" />
			<u-button class="custom-style" type="primary" @click="submit">确定</u-button>
		</u-popup>
		<view class="mt-20" v-if="info.is_friend==0">
			<view class="remarks ptb-30 plr-20 center" @click="agree" style="color: rgb(38,118,213);">同意</view>
			<view class="remarks ptb-30 plr-20 center" style="color: red;" @click="refuse">拒绝</view>
		</view>
		<view class="mt-20" v-if="info.is_friend==1">
			<view class="remarks ptb-30 plr-20 center" @click="sendmessage()">发送消息</view>
			<view class="remarks ptb-30 plr-20 center" @click="handledelete">删除好友</view>
		</view>
	</view>
	<view class="" v-else>
		<u-cell-group>
			<u-cell-item title="群头像" value="">
				<image :src="'http://im.ezongguan.com/static/photo/'+info.group.is_photo" mode="widthFix"
					style="width: 80rpx;border-radius: 16rpx;"></image>
			</u-cell-item>
			<u-cell-item title="群聊昵称" :value="info.group.name"></u-cell-item>
			<u-cell-item title="我的群ID" :value="info.group.name"></u-cell-item>
			<u-cell-item title="我在本群的昵称" class="mt-20"></u-cell-item>
		</u-cell-group>
		<u-cell-group class="mt-26">
			<u-cell-item title="长时间未领取红包"></u-cell-item>
		</u-cell-group>
		<u-cell-group class="mt-26">
			<!-- <u-cell-item title="群二维码" :value="info.group.name"></u-cell-item> -->
			<u-cell-item title="群公告" :value="group.notice"></u-cell-item>
			<u-cell-item title="群管理" @click="gomessage"></u-cell-item>
		</u-cell-group>
		<view class="mt-20" style="background-color: #FFF;">
			<view class="flex remarks  ptb-30 plr-20">
				<view class="">
					消息免打扰
				</view>
				<u-switch size="40" @change="disturb" v-model="checkedone"></u-switch>
			</view>
			<view class="flex remarks ptb-30 plr-20">
				<view class="">
					置顶聊天
				</view>
				<u-switch size="40" @change="change" v-model="checkedtwo"></u-switch>
			</view>
		</view>
		<view class="memberBox">
			<view class="ptb-20 pl-20" style="background-color: rgb(240, 239, 244);">{{info.member.length}}个群成员</view>
			<view class="flex flex-start ptb-30 plr-20" @click="selectFriends(list_id)">
				<u-icon name="plus-circle" size="42"></u-icon>
				<view class="ml-20">邀请新成员</view>
			</view>
			<view class="member plr-40">
				<view class="memberBoxItem flex ptb-10" v-for="item in info.member">
					<view class="flex flex-start">
						<image :src="'http://im.ezongguan.com/static/photo/'+item.photo" mode="widthFix"
							style="width: 80rpx;"></image>
						<view class="ml-30">{{item.show_name}}</view>
					</view>
					<view class="online">
						<view class="flex" v-if="item.is_online==1">
							<image src="../../static/chip/qunzhu.png" mode="widthFix" style="width: 40rpx;"></image>
							<view class="ml-20">在线</view>
						</view>
						<view class="" v-else>离线</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				show_name: '',
				name: '',
				value: '', //备注
				show: false,
				checkedone: false,
				checkedtwo: false,
				user_id: '',
				list_id: '',
				isvalue: 0,
				info: '',
				group:{},
			}
		},
		onShow() {
			this.getChatDetails()
			// this.groupState()
		},
		onLoad(options) {
			console.log(options)
			this.maildetail = options.maildetail
			this.newsdetail = options.newsdetail
			this.content = options.content
			this.show_name = options.show_name
			this.name = options.name
			this.user_id = options.user_id
			this.id = options.id
			this.list_id = options.list_id
			console.log(this.user_id, this.list_id);
			if (this.user_id != '') {
				var params = {
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1',
					user_id: this.user_id,
					in: 0,
				}
				uni.request({
					url: ` http://im.ezongguan.com/im/get/details`,
					method: 'POST',
					data: params,
					success: (res) => {
						// console.log(res.data)
						this.info = res.data.data
						console.log(res);
					},
				})
			} else {
           
			}
		},
		methods: {
			// 群公告
			groupState() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					list_id: this.list_id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/action/groupState`,
					method: 'POST',
					data: params,
					success: (res) => {
						this.group=res.data.data
						console.log(res.data.data)
			
					},
				})
			},
			// 去群管理
			gomessage() {
				console.log(this.grouplist_id);
				uni.navigateTo({
					url: '/pages/chip/groupMessage?grouplist_id=' + this.grouplist_id
				})
			},
			// 获取群聊信息
			getChatDetails() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					list_id: this.list_id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/message/getChatDetails`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data.data.group.list_id)
						this.grouplist_id = res.data.data.group.list_id
						this.info = res.data.data
						console.log(this.info)
						// uni.showToast({
						// 	title:'已添加无法拒绝',
						// 	icon:'none'
						// })
					},
				})
			},

			// 删除好友
			handledelete() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1',
					user_id: this.user_id,
					in: 0,
				}
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.request({
								url: ` http://im.ezongguan.com/im/remove/friend`,
								method: 'POST',
								data: params,
								success: (res) => {
									uni.showToast({
										title: '删除成功'
									})
									setTimeout((item) => {
										uni.switchTab({
											url: '/pages/chip/index'
										})
									}, 1000)
								},
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			// 置顶聊天按钮事件
			change(status) {
				if (status == true) {
					this.isvalue = 0
					var params = {
						_token: uni.getStorageSync('im_token'),
						value: 1,
						list_id: this.list_id,
						_agent_id: '1'
					}
					uni.request({
						url: `http://im.ezongguan.com/im/message/chatTop`,
						method: 'POST',
						data: params,
						success: (res) => {
							console.log(res.data)
						},
					})
				} else {
					this.isvalue = 1
					console.log('不置顶');
					var params = {
						_token: uni.getStorageSync('im_token'),
						value: 0,
						list_id: this.list_id,
						_agent_id: '1'
					}
					uni.request({
						url: `http://im.ezongguan.com/im/message/chatTop`,
						method: 'POST',
						data: params,
						success: (res) => {
							console.log(res.data)
						},
					})
				}
			},
			// 消息免打扰按钮事件
			disturb(status) {
				console.log(status);
				if (status == true) {
					var params = {
						_token: uni.getStorageSync('im_token'),
						value: 1,
						list_id: this.list_id,
						_agent_id: '1'
					}
					uni.request({
						url: `http://im.ezongguan.com/im/message/msgDisturb`,
						method: 'POST',
						data: params,
						success: (res) => {
							console.log(res.data)
						},
					})
				} else if (status == false) {
					var params = {
						_token: uni.getStorageSync('im_token'),
						value: 0,
						list_id: this.list_id,
						_agent_id: '1'
					}
					uni.request({
						url: `http://im.ezongguan.com/im/message/msgDisturb`,
						method: 'POST',
						data: params,
						success: (res) => {
							console.log(res.data)
						},
					})
				}

			},
			// 发送消息
			sendmessage() {
				console.log(this.user_id);
				// uni.navigateTo({
				// 	url: '/pages/chip/winmyCustomer?user_id=' + this.user_id
				// })
				// uni.navigateBack({
				// 	delta:0
				// })
				if (this.newsdetail == 1) {
					console.log(this.user_id);
					console.log(1);
					uni.navigateBack({
						delta: 0
					})
				} else if (this.maildetail == 2) {
					console.log(2);
					console.log(this.list_id);
					console.log(this.user_id);
					uni.navigateTo({
						url: '/pages/my/mycustomer?user_id=' + this.user_id
					})
				}
			},


			// 跳转邀请好友
			selectFriends(list_id) {
				uni.navigateTo({
					url: './selectFriends?list_id=' + this.list_id
				})
			},
			// 拒绝
			refuse() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					apply_id: this.id,
					_agent_id: '1'
				}
				uni.request({
					url: ` http://im.ezongguan.com/im/action/friendNixAction`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data)
						uni.showToast({
							title: '已添加无法拒绝',
							icon: 'none'
						})
					},
				})
			},
			// 同意
			agree() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					apply_id: this.id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/action/friendAddAction`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data)
						uni.showToast({
							title: '已经是好友',
							icon: 'none'
						})
					},
				})
			},
			submit() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					content: this.value,
					user_id: this.user_id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/friend/setRemarks`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data)
						this.show = false
						var params = {
							_token: uni.getStorageSync('im_token'),
							_agent_id: '1',
							user_id: this.user_id,
							in: 0,
						}
						uni.request({
							url: ` http://im.ezongguan.com/im/get/details`,
							method: 'POST',
							data: params,
							success: (res) => {
								console.log(res.data.data)
								this.info = res.data.data
								setTimeout((item) => {
									uni.switchTab({
										url: '/pages/chip/index'
									})
								}, 1000)
							},
						})
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F0EFF4;
	}

	.custom-style {
		color: #fff !important;
	}

	::v-deep  .u-cell {}

	.memberBoxItem {
		border-top: 1rpx solid rgb(240, 239, 244);
		border-bottom: 1rpx solid rgb(240, 239, 244);
		;
	}

	::v-deep  .u-input__input {
		background-color: rgb(246, 246, 246);
		margin: 20rpx;
		padding: 0 20rpx;
	}

	.modify {
		height: 100rpx;
		line-height: 100rpx;
	}

	.container {
		background-color: #F5F5F5;

		.user_info {
			background-color: #fff;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.remarks {
			background-color: #fff;
			border-bottom: 1rpx solid #F5F5F5;
		}
	}
</style>
